<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="lib/element-ui.css">
    <!-- 引入组件库 -->
    <script src="lib/vue.min.js"></script>
    <script src="lib/element-ui.js"></script>
</head>
<body>

<div id="table">
    <div class="table_muban">
        <el-row class="table_search">
            <el-col :span="24">
                <template>
                    <el-select v-model="value" placeholder="请选择机构">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input style="margin-left: 20px"
                              placeholder="请输入用户姓名搜索"
                              v-model="inputVar"
                              clearable>
                    </el-input>
                    <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
            </el-col>
        </el-row>

        <el-row class="table_btn">
            <el-col :span="24" class="text-r">
                <el-button type="danger" icon="el-icon-plus" style="margin-left: 20px">新增人员</el-button>
                <el-button type="danger" icon="el-icon-plus" style="margin-left: 20px">批量新增</el-button>
                <el-button type="danger" icon="el-icon-plus" style="margin-left: 20px">导出</el-button>
            </el-col>
        </el-row>

        <template>
            <el-table
                    size="mini"
                    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="date"
                        label="日期"
                        width="250">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="name"
                        label="姓名"
                        width="250">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="250"
                        prop="address"
                        label="地址">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary"  size="mini" @click="retract(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger"  size="mini" @click="retract(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <div class="block footerBox">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="pageSize"
                        :total="tableData.length">
                </el-pagination>
            </div>
        </template>

    </div>
</div>

<script>

    var table= new Vue({
        el: '#table',
        data: {
            options: [
                {
                    value: '选项1',
                    label: '黄金糕'
                }
                ,
                {
                    value: '选项2',
                    label: '双皮奶'
                },
                {
                    value: '选项3',
                    label: '蚵仔煎'
                },
                {
                    value: '选项4',
                    label: '龙须面'
                },
                {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
            value: '',
            input10: '',
            inputVar: '',
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-02',
                    name: '小熊',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 517 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 119 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 156 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 151 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 17 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 9 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1877 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 151777 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 15179 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 177516 弄'
                },{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 771518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 71517 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 15190 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 6 弄'
                }
            ],
            currentPage: 1,
            pageSize:10
        },
        methods: {
            handleSizeChange: function (size) {
                table.pageSize = size;
            },
            handleCurrentChange: function(currentPage){
                table.currentPage = currentPage;
            },
            searchFun(){
                //请求接口返回数据
            }
        }
    });
</script>

<style scoped>
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    .el-input{
        width: auto;
    }
    .text-r{
        text-align: right;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }
</style>

</body>
</html>